<template>
  <view class="address">
    <view class="top-tips"
      >示例: 张三 13500000000 广东省 广州市
      天河区xx镇xx路xx号。识别后请仔细检查地址是否有误，以免下单失败，邮寄错误!</view
    >
    <view class="copy">
      <textarea
        class="copy-input"
        v-model="copyAddress"
        placeholder="粘贴地址信息，自动拆分姓名、手机号和地址，姓名、手机号、省、市用空格分开。例: 张三 13500000000 广东省 广州市 天河区xx镇xx路xx号。识别后请仔细检查地址是否有误!"
      ></textarea>
      <view class="copy-btns">
        <button
          class="clear"
          @click="copyAddress = ''"
          size="mini"
          type="default"
        >
          清空
        </button>
        <button @click="copyFn" size="mini" type="primary">识别</button>
      </view>
    </view>
    <view class="address-form">
      <form :model="form" label-width="130" ref="uForm">
        <view
          style="
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <text style="padding-right: 10rpx">姓名:</text
          ><input v-model="form.name" placeholder="请输入姓名" />
        </view>
        <view
          style="
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <text style="padding-right: 10rpx">手机号：</text>
          <input v-model="form.mobile" placeholder="请输入手机号" />
        </view>
        <view
          style="
            align-items: center;
            justify-content: space-between;
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <view style="padding-right: 10rpx; width: 140rpx">所属省份:</view>
          <picker @change="confirmFn" :value="form.defaultRegion" mode="region">
            <text
              class="address-form-province"
              v-text="form.region ? form.region : '请选择'"
            ></text>
          </picker>
        </view>
        <view
          style="
            display: flex;
            border-bottom: 1px solid #dbdbdb;
            padding: 20rpx 0;
          "
        >
          <text style="padding-right: 10rpx; white-space: nowrap"
            >详细地址:</text
          >
          <textarea
            style="height: 60rpx"
            v-model="form.print_addr"
            placeholder="请输入详细地址"
          />
        </view>
      </form>
      <view style="padding-top: 20rpx; font-weight: 600">解析数据结构：</view>
      <view style="word-break: break-all" v-text="result"></view>
    </view>
  </view>
</template>

<script>
import { AddressParse } from "./lib/addressParseBundle.js";
export default {
  components: {},
  data() {
    return {
      copyAddress: "刘二狗 13500000000 广东省广州市天河区xx镇xx路xx号",
      // copyAddress:'',
      form: {
        name: "",
        mobile: "",
        print_addr: "",
        region: "",
        province: "",
        city: "",
        area: "",
        district: "",
        defaultRegion: [],
      },
      result: "",
    };
  },
  methods: {
    confirmFn(res) {
      const region = `${res.detail.value[0]} ${res.detail.value[1]} ${res.detail.value[2]}`;
      const defaultRegion = [
        res.detail.value[0],
        res.detail.value[1],
        res.detail.value[1],
      ];
      this.$set(this.form, "province", res.detail.value[0]);
      this.$set(this.form, "city", res.detail.value[1]);
      this.$set(this.form, "area", res.detail.value[2]);
      this.$set(this.form, "region", region);
      this.$set(this.form, "defaultRegion", defaultRegion);
    },
    copyFn() {
      const [result] = AddressParse.parse(this.copyAddress);
      if (!result) {
        return uni.showToast({
          title: "请输入需要解析地址",
          icon: "none",
          mask: true,
        });
      }
      this.$set(this.form, "defaultRegion", []);
      this.result = JSON.stringify(result);
      // 识别不出来
      if (!result.province || !result.city) {
        return uni.showModal({
          title: "地址识别有误，请修改地址正确格式",
          content:
            "姓名、手机号和地址用空格分开:如 张三 13500000000 广东省广州市天河区xx镇xx路xx号。识别后请仔细检查地址是否有误!",
          showCancel: false,
        });
      }
      if (result.province === "北京") {
        result.province = "北京市";
      }
      if (result.province === "天津") {
        result.province = "天津市";
      }
      if (result.province === "上海") {
        result.province = "上海市";
      }
      if (result.province === "重庆") {
        result.province = "重庆市";
      }
      if (result.province.indexOf("市") > -1) {
        result.city = "市辖区";
      }
      if (
        result.province === "广东省" &&
        (result.city === "东莞市" || result.city === "中山市")
      ) {
        result.area = result.city === "东莞市" ? "东莞市" : "中山市";
      }
      // 修复江苏省徐州市徐州经济技术开发区自动识别错误bug
      if (
        result.province === "江苏省" &&
        result.city === "徐州市" &&
        result.area === "" &&
        /^经济技术开发区/.test(result.details)
      ) {
        result.area = "徐州经济技术开发区";
        result.details = result.details.replace(/^经济技术开发区/, "");
      }
      this.form.province = result.province || "";
      this.form.city = result.city || "";
      this.form.district = result.area || "";
      this.form.region = `${result.province || ""} ${result.city || ""} ${
        result.area || ""
      }`;
      const defaultRegion = [
        result.province || "",
        result.city || "",
        result.area || "",
      ];
      if (result.province && result.city && result.area) {
        this.$set(this.form, "defaultRegion", defaultRegion);
      }
      this.form.print_addr = result.details || "";
      this.form.name = result.name || "";
      this.form.mobile = result.mobile || "";
    },
  },
  onLoad(option) {},
};
</script>

<style lang="less" scoped>
@expressDetail: address;

//链接跳转箭头
.setLinkArrows(@width: 20rpx, @bWidth: 4rpx, @bColor: #b2b2b2, @right: 30rpx, @top: 50%, @transY: -50%, @rotate: 45deg) {
  &:after {
    content: "";
    width: @width;
    height: @width;
    border-top-width: @bWidth;
    border-right-width: @bWidth;
    border-top-style: solid;
    border-right-style: solid;
    border-top-color: @bColor;
    border-right-color: @bColor;
    position: absolute;
    right: @right;
    top: @top;
    transform: translateY(@transY) rotate(@rotate);
  }
}

.@{expressDetail} {
  .copy {
    background-color: #fff;
    padding: 30rpx;
    margin: 0 30rpx 20rpx;
    border-radius: 16rpx;
    border: 1px solid #dbdbdb;
    margin-top: 20rpx;

    &-input {
      width: 100%;
      line-height: 1.5;
      height: 150rpx;
    }

    &-btns {
      text-align: right;
      margin-top: 10rpx;
      border-top: 1px solid #dbdbdb;
      padding-top: 20rpx;

      .clear {
        margin-right: 30rpx;
      }

      /deep/ button {
        padding: 0 40rpx;
      }
    }
  }

  &-form {
    background-color: #fff;
    padding: 30rpx;
    margin: 20rpx 30rpx 30rpx;
    border-radius: 16rpx;

    &-province {
      padding-right: 30rpx;
      position: relative;
      .setLinkArrows(@right: 0);
      text-align: right;
    }
  }
}

.top-tips {
  background-color: #ffe6e6;
  padding: 20rpx;
  color: #fa3534;
  font-size: 26rpx;
  margin: 0 30rpx;
}
</style>
